<template>
  <div class="user-info-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="聊天信息"
      left-arrow
      @click-left="$emit('close')"
    />
    
    <!-- 用户基本信息 -->
    <div class="user-basic-info">
      <div class="user-avatar" @click="viewUserProfile">
        <img :src="userInfo.avatar" :alt="userInfo.name" />
      </div>
      <div class="user-name">{{ userInfo.name }}</div>
      <div class="user-id">小红书号：{{ userInfo.id }}</div>
      <div class="user-actions">
        <div class="action-item" @click="viewUserProfile">
          <van-icon name="manager-o" size="24" />
          <span>查看主页</span>
        </div>
        <div class="action-item" @click="toggleFollow">
          <van-icon :name="userInfo.isFollowed ? 'like' : 'like-o'" size="24" :class="{ active: userInfo.isFollowed }" />
          <span>{{ userInfo.isFollowed ? '已关注' : '关注' }}</span>
        </div>
      </div>
    </div>
    
    <!-- 聊天设置 -->
    <div class="chat-section">
      <div class="section-content">
        <div class="setting-item">
          <span>消息免打扰</span>
          <van-switch v-model="muted" size="24px" />
        </div>
        <div class="setting-item">
          <span>置顶聊天</span>
          <van-switch v-model="pinned" size="24px" />
        </div>
        <div class="setting-item" @click="searchHistory">
          <span>查找聊天记录</span>
          <van-icon name="arrow" />
        </div>
        <div class="setting-item" @click="clearHistory">
          <span>清空聊天记录</span>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    
    <!-- 共同群聊 -->
    <div class="chat-section" v-if="commonGroups.length > 0">
      <div class="section-header">
        <span>共同群聊</span>
      </div>
      <div class="section-content">
        <div class="group-list">
          <div class="group-item" v-for="(group, index) in commonGroups" :key="index" @click="goToGroup(group.id)">
            <div class="group-avatar">
              <img v-for="(avatar, i) in group.avatars.slice(0, 3)" :key="i" :src="avatar" :alt="group.name" />
            </div>
            <div class="group-info">
              <div class="group-name">{{ group.name }}</div>
              <div class="group-member-count">{{ group.memberCount }}人</div>
            </div>
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
    </div>
    
    <!-- 共享内容 -->
    <div class="chat-section">
      <div class="section-header">
        <span>共享内容</span>
      </div>
      <div class="section-content">
        <div class="shared-content-tabs">
          <div 
            class="tab-item" 
            :class="{ active: activeTab === 'images' }" 
            @click="activeTab = 'images'"
          >
            图片
          </div>
          <div 
            class="tab-item" 
            :class="{ active: activeTab === 'videos' }" 
            @click="activeTab = 'videos'"
          >
            视频
          </div>
          <div 
            class="tab-item" 
            :class="{ active: activeTab === 'files' }" 
            @click="activeTab = 'files'"
          >
            文件
          </div>
          <div 
            class="tab-item" 
            :class="{ active: activeTab === 'links' }" 
            @click="activeTab = 'links'"
          >
            链接
          </div>
          <div 
            class="tab-item" 
            :class="{ active: activeTab === 'notes' }" 
            @click="activeTab = 'notes'"
          >
            笔记
          </div>
        </div>
        
        <!-- 图片内容 -->
        <div class="shared-content" v-if="activeTab === 'images'">
          <div class="image-grid" v-if="sharedImages.length > 0">
            <div class="image-item" v-for="(image, index) in sharedImages" :key="index" @click="previewImage(image.url)">
              <img :src="image.url" :alt="'共享图片'" />
            </div>
          </div>
          <div class="empty-content" v-else>
            <van-empty description="暂无共享图片" />
          </div>
        </div>
        
        <!-- 视频内容 -->
        <div class="shared-content" v-if="activeTab === 'videos'">
          <div class="video-list" v-if="sharedVideos.length > 0">
            <div class="video-item" v-for="(video, index) in sharedVideos" :key="index" @click="playVideo(video.url)">
              <div class="video-thumbnail">
                <img :src="video.thumbnail" alt="视频缩略图" />
                <div class="play-icon">
                  <van-icon name="play-circle-o" size="40" />
                </div>
              </div>
              <div class="video-duration">{{ video.duration }}</div>
            </div>
          </div>
          <div class="empty-content" v-else>
            <van-empty description="暂无共享视频" />
          </div>
        </div>
        
        <!-- 文件内容 -->
        <div class="shared-content" v-if="activeTab === 'files'">
          <div class="file-list" v-if="sharedFiles.length > 0">
            <div class="file-item" v-for="(file, index) in sharedFiles" :key="index" @click="openFile(file)">
              <div class="file-icon">
                <van-icon :name="getFileIcon(file.type)" size="24" />
              </div>
              <div class="file-info">
                <div class="file-name">{{ file.name }}</div>
                <div class="file-meta">{{ file.size }} · {{ file.time }}</div>
              </div>
            </div>
          </div>
          <div class="empty-content" v-else>
            <van-empty description="暂无共享文件" />
          </div>
        </div>
        
        <!-- 链接内容 -->
        <div class="shared-content" v-if="activeTab === 'links'">
          <div class="link-list" v-if="sharedLinks.length > 0">
            <div class="link-item" v-for="(link, index) in sharedLinks" :key="index" @click="openLink(link.url)">
              <div class="link-icon">
                <img :src="link.favicon" alt="网站图标" />
              </div>
              <div class="link-info">
                <div class="link-title">{{ link.title }}</div>
                <div class="link-url">{{ link.url }}</div>
                <div class="link-time">{{ link.time }}</div>
              </div>
            </div>
          </div>
          <div class="empty-content" v-else>
            <van-empty description="暂无共享链接" />
          </div>
        </div>
        
        <!-- 笔记内容 -->
        <div class="shared-content" v-if="activeTab === 'notes'">
          <div class="note-list" v-if="sharedNotes.length > 0">
            <div class="note-item" v-for="(note, index) in sharedNotes" :key="index" @click="viewNote(note.id)">
              <div class="note-image">
                <img :src="note.cover" alt="笔记封面" />
              </div>
              <div class="note-info">
                <div class="note-title">{{ note.title }}</div>
                <div class="note-time">{{ note.time }}</div>
              </div>
            </div>
          </div>
          <div class="empty-content" v-else>
            <van-empty description="暂无共享笔记" />
          </div>
        </div>
      </div>
    </div>
    
    <!-- 举报/拉黑 -->
    <div class="user-action">
      <van-button type="default" block @click="showActionSheet = true">举报/拉黑</van-button>
    </div>
    
    <!-- 操作菜单 -->
    <van-action-sheet
      v-model="showActionSheet"
      :actions="actions"
      cancel-text="取消"
      @select="onActionSelect"
    />
  </div>
</template>

<script>
export default {
  name: 'UserInfo',
  props: {
    userId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      userInfo: {
        id: '',
        name: '',
        avatar: '',
        isFollowed: false
      },
      muted: false,
      pinned: false,
      commonGroups: [],
      activeTab: 'images',
      sharedImages: [],
      sharedVideos: [],
      sharedFiles: [],
      sharedLinks: [],
      sharedNotes: [],
      showActionSheet: false,
      actions: [
        { name: '举报', color: '#ee0a24' },
        { name: '拉黑' }
      ]
    }
  },
  created() {
    this.fetchUserInfo()
    this.fetchCommonGroups()
    this.fetchSharedContent()
  },
  methods: {
    // 获取用户信息
    fetchUserInfo() {
      // 模拟API请求
      setTimeout(() => {
        this.userInfo = {
          id: this.userId,
          name: 'momo',
          avatar: 'https://i.pravatar.cc/100?img=4',
          isFollowed: Math.random() > 0.5
        }
        
        this.muted = Math.random() > 0.5
        this.pinned = Math.random() > 0.5
      }, 300)
    },
    
    // 获取共同群聊
    fetchCommonGroups() {
      // 模拟API请求
      setTimeout(() => {
        this.commonGroups = [
          {
            id: 'g1',
            name: '【群聊】没想好名字',
            memberCount: 32,
            avatars: [
              'https://i.pravatar.cc/100?img=1',
              'https://i.pravatar.cc/100?img=2',
              'https://i.pravatar.cc/100?img=3'
            ]
          },
          {
            id: 'g2',
            name: '旅行爱好者',
            memberCount: 128,
            avatars: [
              'https://i.pravatar.cc/100?img=5',
              'https://i.pravatar.cc/100?img=6',
              'https://i.pravatar.cc/100?img=7'
            ]
          }
        ]
      }, 300)
    },
    
    // 获取共享内容
    fetchSharedContent() {
      // 模拟API请求
      setTimeout(() => {
        // 共享图片
        this.sharedImages = Array.from({ length: 9 }, (_, i) => ({
          id: i + 1,
          url: `https://picsum.photos/300/300?random=${i + 100}`
        }))
        
        // 共享视频
        this.sharedVideos = Array.from({ length: 3 }, (_, i) => ({
          id: i + 1,
          url: `video_${i + 1}.mp4`,
          thumbnail: `https://picsum.photos/300/200?random=${i + 200}`,
          duration: `${Math.floor(Math.random() * 10) + 1}:${Math.floor(Math.random() * 60).toString().padStart(2, '0')}`
        }))
        
        // 共享文件
        this.sharedFiles = [
          {
            id: 1,
            name: '旅行计划.docx',
            type: 'doc',
            size: '2.3MB',
            time: '2023-04-15'
          },
          {
            id: 2,
            name: '预算表.xlsx',
            type: 'excel',
            size: '1.5MB',
            time: '2023-04-10'
          },
          {
            id: 3,
            name: '演示文稿.pptx',
            type: 'ppt',
            size: '5.8MB',
            time: '2023-04-05'
          }
        ]
        
        // 共享链接
        this.sharedLinks = [
          {
            id: 1,
            title: '2023年最佳旅行目的地推荐',
            url: 'https://example.com/travel-destinations',
            favicon: 'https://www.google.com/favicon.ico',
            time: '2023-04-18'
          },
          {
            id: 2,
            title: '如何拍出好看的旅行照片',
            url: 'https://example.com/travel-photography',
            favicon: 'https://www.instagram.com/favicon.ico',
            time: '2023-04-12'
          }
        ]
        
        // 共享笔记
        this.sharedNotes = [
          {
            id: 101,
            title: '日本东京旅行攻略',
            cover: 'https://picsum.photos/300/200?random=301',
            time: '2023-04-20'
          },
          {
            id: 102,
            title: '巴厘岛度假必备清单',
            cover: 'https://picsum.photos/300/200?random=302',
            time: '2023-04-15'
          }
        ]
      }, 300)
    },
    
    // 查看用户资料
    viewUserProfile() {
      this.$router.push(`/user/${this.userInfo.id}`)
    },
    
    // 切换关注状态
    toggleFollow() {
      this.userInfo.isFollowed = !this.userInfo.isFollowed
      this.$toast(this.userInfo.isFollowed ? '已关注' : '已取消关注')
    },
    
    // 搜索聊天记录
    searchHistory() {
      this.$toast('搜索聊天记录功能开发中')
    },
    
    // 清空聊天记录
    clearHistory() {
      this.$dialog.confirm({
        title: '清空聊天记录',
        message: '确定要清空与该用户的聊天记录吗？',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.$toast('聊天记录已清空')
      }).catch(() => {
        // 取消操作
      })
    },
    
    // 前往群聊
    goToGroup(groupId) {
      this.$router.push(`/chat/${groupId}`)
    },
    
    // 预览图片
    previewImage() {
      this.$toast('图片预览功能开发中')
    },
    
    // 播放视频
    playVideo() {
      this.$toast('视频播放功能开发中')
    },
    
    // 打开文件
    openFile(file) {
      this.$toast(`打开文件：${file.name}`)
    },
    
    // 获取文件图标
    getFileIcon(type) {
      const icons = {
        doc: 'description',
        excel: 'description',
        ppt: 'description',
        pdf: 'description',
        zip: 'description',
        default: 'description'
      }
      return icons[type] || icons.default
    },
    
    // 打开链接
    openLink(url) {
      this.$toast(`打开链接：${url}`)
    },
    
    // 查看笔记
    viewNote(noteId) {
      this.$router.push(`/detail/${noteId}`)
    },
    
    // 操作菜单选择
    onActionSelect(action) {
      if (action.name === '举报') {
        this.$toast('举报功能开发中')
      } else if (action.name === '拉黑') {
        this.$dialog.confirm({
          title: '拉黑用户',
          message: '确定要将该用户拉黑吗？拉黑后将不再收到该用户的消息。',
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          this.$toast('已将用户拉黑')
          this.$emit('close')
          this.$router.push('/message')
        }).catch(() => {
          // 取消操作
        })
      }
    }
  }
}
</script>

<style scoped>
.user-info-container {
  height: 100%;
  background-color: #f7f8fa;
  overflow-y: auto;
}

.user-basic-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #fff;
}

.user-avatar {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.user-name {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 5px;
}

.user-id {
  font-size: 14px;
  color: #999;
  margin-bottom: 15px;
}

.user-actions {
  display: flex;
  justify-content: center;
  width: 100%;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 20px;
}

.action-item .van-icon {
  margin-bottom: 5px;
}

.action-item .active {
  color: #ff2442;
}

.chat-section {
  margin-top: 10px;
  background-color: #fff;
}

.section-header {
  padding: 15px;
  border-bottom: 1px solid #f5f5f5;
  font-weight: 500;
}

.section-content {
  padding: 15px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 16px;
}

.setting-item .van-icon {
  color: #999;
}

.setting-item + .setting-item {
  border-top: 1px solid #f5f5f5;
}

.group-list {
  margin-top: 10px;
}

.group-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.group-item + .group-item {
  border-top: 1px solid #f5f5f5;
}

.group-avatar {
  position: relative;
  width: 50px;
  height: 50px;
  margin-right: 15px;
}

.group-avatar img {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #fff;
  object-fit: cover;
}

.group-avatar img:nth-child(1) {
  top: 0;
  left: 0;
  z-index: 3;
}

.group-avatar img:nth-child(2) {
  top: 0;
  right: 0;
  z-index: 2;
}

.group-avatar img:nth-child(3) {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.group-info {
  flex: 1;
}

.group-name {
  font-size: 16px;
  margin-bottom: 5px;
}

.group-member-count {
  font-size: 14px;
  color: #999;
}

.shared-content-tabs {
  display: flex;
  border-bottom: 1px solid #f5f5f5;
  margin-bottom: 15px;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #ff2442;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background-color: #ff2442;
}

.shared-content {
  min-height: 200px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.image-item {
  aspect-ratio: 1;
  overflow: hidden;
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.video-item {
  position: relative;
}

.video-thumbnail {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 8px;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.video-duration {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 4px;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.file-item + .file-item {
  border-top: 1px solid #f5f5f5;
}

.file-icon {
  width: 40px;
  height: 40px;
  background-color: #f5f5f5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.file-info {
  flex: 1;
}

.file-name {
  font-size: 16px;
  margin-bottom: 5px;
}

.file-meta {
  font-size: 12px;
  color: #999;
}

.link-item {
  display: flex;
  padding: 10px 0;
}

.link-item + .link-item {
  border-top: 1px solid #f5f5f5;
}

.link-icon {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.link-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.link-info {
  flex: 1;
}

.link-title {
  font-size: 16px;
  margin-bottom: 5px;
}

.link-url {
  font-size: 14px;
  color: #999;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-time {
  font-size: 12px;
  color: #999;
}

.note-item {
  display: flex;
  padding: 10px 0;
}

.note-item + .note-item {
  border-top: 1px solid #f5f5f5;
}

.note-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 10px;
}

.note-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.note-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.note-title {
  font-size: 16px;
  margin-bottom: 5px;
}

.note-time {
  font-size: 12px;
  color: #999;
}

.empty-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.user-action {
  margin: 20px 15px;
}
</style> 